iT邦幫忙

DAY 7
0

Node.js 學習筆記系列 第 7

Node.js學習筆記六:Express.js專案目錄架構與package.json

  • 分享至 

  • xImage
  •  

在Express.js的介紹中我們為Node.js安裝了Express.js這個目前最流行的網頁開發框架(web framework),並建立了一個testproject。特別的是,由於我選擇使用hogan.js這個由Twitter開發的模版引擎(template engine)以及LESS這個CSS預處理器(CSS pre-processor),我的指令是這樣的:

express testproject --hogan -c less

--hogan:是指使用hogan;

-c:是CSS的簡稱。

一、Express.js專案的package.json

要檢查這兩項是否安裝成功,可以打開"/testproject/package.json":

{
  "name": "testproject",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.8.6",
    "body-parser": "~1.6.6",
    "cookie-parser": "~1.3.2",
    "morgan": "~1.2.3",
    "serve-favicon": "~2.0.1",
    "debug": "~1.0.4",
    "hjs": "~0.0.6",
    "less-middleware": "1.0.x"
  }
}

可以看到最後兩行:

"hjs": "~0.0.6",
"less-middleware": "1.0.x"

分別代表hogan.js與LESS。

這個package.json文件可以說是這個專案的定義文件。裡面包含專案名,版本等基本資訊。其中值得一提的是scripts段:

 "scripts": {
    "start": "node ./bin/www"
  },

這是在較新版本的Express.js才有的。作用是原本我們用:"node index.js"來啟動程式,有了這一句後改為用:"npm start"就可啟動程式(要在專案目錄內)。

後面的dependencies段是記錄這個專案所依賴的模組,當你在專案目錄運行:"npm install"的時候,Node.js會自動把相依的模組安裝到node_modules裡面。可以看到hogan.js跟LESS都在這裡,而原本的Jade模版引擎則是不見了。

另外要確認hogan.js是否已被啟用,可以打開"/testproject/app.js",找到15行左右,會有一句:

app.set('view engine', 'hjs');

這裡很清楚的將"view engine"設定為我們想要的"hjs"。

二、Express.js專案的目錄架構

現在我們來看看Express.js為專案創建的其他目錄是些什麼。

  1. bin:這是在剛剛的package.json的"scripts"段有提到,它的目的是存放專案啟動指令,包括一些啟動設定。裡面的"www"文件是一個例子,你可以參考來修改。

  2. node_modules:存放專案要用到的Node.js模組。

  3. public:圖片,Javascripts,CSS等。

  4. routes:路由相關。

  5. views:網頁模版,也就hogan.js文件存放的地方。

三、總結

今天先瞭解Express.js專案的結構,明天再來深入探討。

[image credit: Aleksi Tappura]


上一篇
Node.js學習筆記五:nodemon的安裝與使用
下一篇
Node.js學習筆記七:Express.js網頁修改
系列文
Node.js 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言